<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="../../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">
  <style type="text/css">
  
  	#register{
  		font-size: 16px;
  		margin: 0px;
  		padding: 0px;
  	}
  	#register ul li{
  		 list-style:  none;
  		 height: 50px;
  		 width: 500px;
  		 margin: 0px auto;
  	}
  	#register .errmsg{
  		color: red;
  	}
  	#register .label {
  		display:inline-block;
		width:100px;
		margin-right: 5px;
	}

	#register input{
		display:inline-block;
		width:200px;
		height: 20px; 
		margin-right: 5px;
	}
	#register  .star {
		display:inline-block;
  		font-weight: bold;
  		color: red;
	}
	
  </style>
  <script>
  $(document).ready(function() {
    $("#register").dialog({buttons: { "注册": function() {_register(); },"取消":function(){ $(this).dialog("close");} },
    	autoOpen: false ,hide:{ effect: 'drop', direction: "up" },modal:true,width:600,height:400,
    	draggable:false,resizable:false});
    $("#register .username").blur(function(){
    	_register_check_username($(this).val());
    });
    $("#register .email").blur(function(){
    	_register_check_email($(this).val());
    });
    $("#register .password").blur(function(){
    	_register_check_password($(this).val());
    });
    $("#register .password1").blur(function(){
    	_register_check_password1($(this).val());
    });
    $("#open").button();
    $("#open").click(function(){
    	$("#register  .star").html("*");
    	$("#register").dialog("open");
    });
  });
  
  
  
  function _register_check_username(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#register .img_username").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">用户名不能为空");
			flag=false;
		}else if(str.length<1){
			$("#register .img_username").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">用户名最少为3个字符");
			flag=false;
		}else{
			$("#register .img_username").html( "<img width=\"40\"  height=\"40\" src=\"../../static/img/progress_bar.gif\" >");
			if(_register_exist_user(str)){
				$("#register .img_username").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">用户名已经存在");
				flag=false;
			}else{
				$("#register .img_username").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
			}
			
		}
		
		return flag;
	}
	function _register_check_email(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#register .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">真实姓名不能为空");
			flag=false;
		}else if(str.length<1){
			$("#register .img_email").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">真实姓名最少为3个字符");
			flag=false;
		}else{
			$("#register .img_email").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	function _register_check_password(str) {
		flag=true;
		if (str==undefined||str==null||str == ""){
			$("#register .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码不能为空");
			flag=false;
		}else if(str.length<1){
			$("#register .img_password").html( "<img src=\"../../../static/img/check_error.png\" align=\"middle\">密码最少为3个字符");
			flag=false;
		}else{
			$("#register .img_password").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	function _register_check_password1(str) {
		var str1=$("#register .password").val();
		flag=true;
		if (str==undefined||str==null||str!=str1){
			$("#register .img_password1").html ("<img src=\"../../../static/img/check_error.png\" align=\"middle\">两次密码不一样");
			flag=false;
		}else{
			$("#register .img_password1").html( "<img src=\"../../../static/img/check_success.png\" align=\"middle\">");
		}
		
		return flag;
	}
	
	function _register_checkAll() {
		var username=$("#register .username").val();
		var email=$("#register .email").val();
		var password=$("#register .password").val();
		var password1=$("#register .password1").val();
		var flag=_register_check_username(username);
		if(flag)
			flag=_register_check_email(email);
		if(flag)
			flag=_register_check_password(password);
		if(flag)
			flag=_register_check_password1(password1);
		
		return flag;
	}
	
	function _register_exist_user(username) {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", "/user/check_user.do?username="+username, false);
		xmlhttp.send();
		var result = xmlhttp.responseText;
		if(result=="true")
			return true;
		else 
			return false;
	}
	
	function _register(){
		var flag= _register_checkAll();
		if(flag)
			$("#register_form").submit();
			
	}
  </script>
  
</head>
<body style="font-size:62.5%;">
  
<div id="register" title="用户注册">
	<form action="/user/register.do" method="post" id="register_form">
			<ul>
				<li class="errmsg"></li>
				<li>
					<span class="label">昵称:</span>
					<span class="input"><input type="text" name="username" class="username"></span>
					<span class="star img_username">*</span></li>
				<li>
					<span class="label">邮箱:</span>
					<span class="input"><input type="text" name="email" class="email"></span>
					<span class="star img_email">*</span></li>
				<li>
					<span class="label">密码:</span>
					<span class="input"><input type="password" name="password" class="password"></span>
					<span class="star img_password">*</span></li>
				<li>
					<span class="label">确认密码:</span>
					<span class="input"><input type="password" name="password1" class="password1"></span>
					<span class="star img_password1">*</span></li>
			</ul>
     </form>
</div>
<button id="open">open</button>
</body>
</html>

